[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/skeleton-loader.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useState } from "react" export default function SkeletonLoader() { const [activeBlock, setActiveBlock] = useState(0) const [loadedBlocks, setLoadedBlocks] = useState(0) // Track how many blocks have been loaded const totalBlocks = 5 useEffect(() => { const startAnimation = () => { const interval = setInterval(() => { setActiveBlock((prev) => { if (prev < totalBlocks) { const next = prev + 1 setLoadedBlocks(next) // Update loaded blocks count return next } else { // Animation complete, clear interval and pause clearInterval(interval) setTimeout(() => { setActiveBlock(0) // Reset to start setLoadedBlocks(0) // Reset loaded blocks startAnimation() // Restart the animation }, 2000) return -1 // Clear highlight during pause } }) }, 800) return interval } const interval = startAnimation() return () => clearInterval(interval) }, []) // Empty dependency array to run only once return (

{/* Browser Header */}

{/* Content */}

{/* Title */}

Loading animation...

{/* Top wide block */}

= 1 || activeBlock === -1 ? "opacity-100" : "opacity-0" }`} style={{ clipPath: loadedBlocks >= 1 || activeBlock === -1 ? "inset(0 0 0 0)" : "inset(0 100% 0 0)", animation: activeBlock === 1 ? "reveal-block 0.6s ease-out forwards" : "none", }} /> {activeBlock === 1 && (

)}

{/* Middle row - two blocks */}

= 2 || activeBlock === -1 ? "opacity-100" : "opacity-0" }`} style={{ clipPath: loadedBlocks >= 2 || activeBlock === -1 ? "inset(0 0 0 0)" : "inset(0 100% 0 0)", animation: activeBlock === 2 ? "reveal-block 0.6s ease-out forwards" : "none", }} /> {activeBlock === 2 && (

)}

= 3 || activeBlock === -1 ? "opacity-100" : "opacity-0" }`} style={{ clipPath: loadedBlocks >= 3 || activeBlock === -1 ? "inset(0 0 0 0)" : "inset(0 100% 0 0)", animation: activeBlock === 3 ? "reveal-block 0.6s ease-out forwards" : "none", }} /> {activeBlock === 3 && (

)}

{/* Bottom row - two blocks */}

= 4 || activeBlock === -1 ? "opacity-100" : "opacity-0" }`} style={{ clipPath: loadedBlocks >= 4 || activeBlock === -1 ? "inset(0 0 0 0)" : "inset(0 100% 0 0)", animation: activeBlock === 4 ? "reveal-block 0.6s ease-out forwards" : "none", }} /> {activeBlock === 4 && (

)}

= 5 || activeBlock === -1 ? "opacity-100" : "opacity-0" }`} style={{ clipPath: loadedBlocks >= 5 || activeBlock === -1 ? "inset(0 0 0 0)" : "inset(0 100% 0 0)", animation: activeBlock === 5 ? "reveal-block 0.6s ease-out forwards" : "none", }} /> {activeBlock === 5 && (

)}

) } [V0_FILE]typescriptreact:file="components/code-streaming.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useState } from "react" interface CodeSegment { id: number width: number // pixel width color: string animated: boolean } interface CodeLine { id: number segments: CodeSegment[] indent: number completed: boolean } const codeColors = ["bg-blue-400", "bg-gray-400", "bg-teal-400", "bg-purple-400", "bg-green-400", "bg-slate-500"] const linePatterns = [ { segments: [ { width: 80, color: 0 }, { width: 60, color: 1 }, { width: 20, color: 2 }, { width: 120, color: 3 }, ], indent: 0, }, { segments: [ { width: 100, color: 1 }, { width: 140, color: 4 }, ], indent: 1, }, { segments: [ { width: 160, color: 2 }, { width: 90, color: 1 }, { width: 12, color: 0 }, ], indent: 1, }, { segments: [ { width: 70, color: 3 }, { width: 12, color: 1 }, ], indent: 2, }, { segments: [{ width: 120, color: 4 }], indent: 2 }, { segments: [{ width: 90, color: 1 }], indent: 2 }, { segments: [{ width: 110, color: 2 }], indent: 2 }, { segments: [{ width: 12, color: 0 }], indent: 1 }, { segments: [ { width: 140, color: 1 }, { width: 80, color: 3 }, ], indent: 0, }, ] export default function CodeStreaming() { const [lines, setLines] = useState([]) const [currentLine, setCurrentLine] = useState(null) const [headerDots, setHeaderDots] = useState(0) useEffect(() => { let lineId = 0 let patternIndex = 0 let animationRunning = true const animateHeader = () => { if (!animationRunning) return setHeaderDots((prev) => (prev + 1) % 4) setTimeout(animateHeader, 800) } animateHeader() const startNewLine = () => { if (!animationRunning) return const pattern = linePatterns[patternIndex % linePatterns.length] const newLine: CodeLine = { id: lineId++, segments: pattern.segments.map((seg, index) => ({ id: index, width: seg.width, color: codeColors[seg.color], animated: false, })), indent: pattern.indent, completed: false, } setCurrentLine(newLine) patternIndex++ let segmentIndex = 0 const animateNextSegment = () => { if (segmentIndex >= newLine.segments.length) { setLines((prevLines) => [...prevLines.slice(-11), { ...newLine, completed: true }]) setCurrentLine(null) setTimeout(() => { if (animationRunning) { startNewLine() } }, 150) return } setCurrentLine((prev) => { if (!prev) return prev if (segmentIndex >= prev.segments.length) return prev const updated = { ...prev } updated.segments = [...prev.segments] updated.segments[segmentIndex] = { ...prev.segments[segmentIndex], animated: true } return updated }) segmentIndex++ setTimeout(animateNextSegment, 150 + segmentIndex * 50) } setTimeout(animateNextSegment, 100) } startNewLine() return () => { animationRunning = false } }, []) return (

component.tsx

{[0, 1, 2].map((i) => (

))}

{lines.map((line, index) => (

{line.segments.map((segment) => (

))}

))} {currentLine && (

{currentLine.segments.map((segment) => (

))}

)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import SkeletonLoader from "@/components/skeleton-loader" import CodeStreaming from "@/components/code-streaming" export default function Home() { return (

) }

About

Tags

Share

About

Tags

Share

More from jakeatgalileo

More Templates Like This

About

Tags

Share

About

Tags

Share

More from jakeatgalileo

More Templates Like This